<!DOCTYPE html>
<html>
<head>
<!--
	Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
	<title>ol-ext: API-geo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/IGN_logo_2012.svg/218px-IGN_logo_2012.svg.png" />

	<meta name="description" content="Geoportail layer for ol" />
	<meta name="keywords" content="ol, openlayers, layer, source, geoportail" />

  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>
  <!-- filesaver-js -->
  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

	<link rel="stylesheet" href="../style.css" />
  <style>
    #map {
      position: absolute;
      top: 4.5em;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #0a3b59;
    }
  </style>
</head>
<body >
	<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
  <a href="../../index.html">
    <h1>ol-ext: API-geo</h1>
  </a>

	<!-- DIV pour la carte -->
	<div id="map"></div>
	
<script type="text/javascript">
	// The map
	var map = new ol.Map ({
    target: 'map',
    view: new ol.View ({
      zoom: 6,
      center: [285345, 5865529]
    })
  });

  // Earth photo
  map.addLayer (new ol.layer.Geoportail({
    layer: 'ORTHOIMAGERY.ORTHOPHOTOS'
  }));


  var communes = new ol.source.Vector({});
  map.addLayer(
    new ol.layer.Vector({ 
      title: 'Communes', 
      className: 'vector', 
      source: communes,
      style: new ol.style.Style({
        image: new ol.style.Circle({
          radius: 2,
          fill: new ol.style.Fill({ color: '#fff' })
        }),
        stroke: new ol.style.Stroke({
          color: [255,255,255,.75],
          width: 1.25
        })
      })
    })
  );

  var format = new ol.format.GeoJSON();

  // Chargement des communes par département
  // https://api.gouv.fr/documentation/api-geo
  function loadDep(dep) {
    if (dep<0) return;
    var cdep = ('0'+dep).substr(-2);
    if (dep===20) cdep = '2A';
    if (dep===0) cdep = '2B';
    console.log(dep, cdep)
    $.ajax({
      url: 'https://geo.api.gouv.fr/communes?codeDepartement='+cdep+'&fields=codesPostaux,centre,surface,population&format=geojson',
      success: function(data) {
        var features = format.readFeatures(data, { dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection() });
        features.forEach(function(f) {
          f.set('codesPostaux', f.get('codesPostaux').join(','))
        })
        communes.addFeatures(features);
        loadDep(dep-1)
      }
    })
  }
  loadDep(95);

  function save() {
    var features = communes.getFeatures();
    var data = format.writeFeatures(features, { dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection(), decimals: 4 });
    var blob = new Blob([data], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "communes.geojson");
  }


</script>
</body>
</html>